<template>
	<view class="content">
		<view class="loader">
		</view>
		<view class="logoimg">
				<image class="logo" src="/static/logo.png"></image>
		</view>
		<view class="text-area">
			<text class="title">请使用账号密码安全登录</text>
		</view>
			<input  type="text"   placeholder="账号" class="inputAcc" v-model="mobile" />
			<input type="password" placeholder="密码" class="input" v-model="pwd" />
			<button  class="loginBtn" :disabled="loading"  @click="login">
				Go
			</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				mobile: '',
				pwd: '',
				loading: false
			}
		},
		methods: {
			login(){
				this.loading = true
				if(this.mobile == ""){
					this.loading=false
					uni.showToast({
						title: '请输入手机号',
						icon:"none"
					});
				}else if(this.pwd == ""){
					this.loading = false
					uni.showToast({
						title: '请输入密码',
						icon:"none"
					});
				}else{
				var data = {
						'mobile': this.mobile,
						'pwd': this.pwd,
					}
					console.log(JSON.stringify(data))
					uni.request({
						url: 'http://adkk.mygodmall.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=account.login&app=1',
						method: 'POST',
						data: data,
						header:{'Content-Type':'application/x-www-form-urlencoded'},
						success: res => {
							if(res.data.status == 0){
								uni.showToast({
									title: res.data.result.message,
									icon:"none"
								});
								this.loading = false
							}else{
								uni.setStorage({
									key: 'openid',
									data: res.data.result.openid,
									success: (res) => {},
									fail: () => {}
								})
								setTimeout(()=>{
									this.loading = false
									uni.reLaunch({
										url: '/pages/page/page'
									});
								},500)
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
		}
	}
</script>

<style>
	page{
		background-color: #000000;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.input{
		margin: 20% 0rem;
		position: absolute;
		top:600rpx;
		height:70upx;
		width: 50%;
		color: #FFFFFF;
		text-align: center;
		border-bottom: 1px #007AFF solid;
		border-radius: 10upx;
	}
	.inputAcc{
		 margin: 20% 0rem;
		 position: absolute;
		 top:470rpx;
		 height:70upx;
		 width: 50%;
		 color: #FFFFFF;
		 text-align: center;
		 border-bottom: 1px solid #007AFF;
		 border-radius: 10upx;
	}
	.loginBtn{
		 background: linear-gradient(to right, #4bb0ff, #6149f6);
		 border-radius: 200rpx;
		 width: 200rpx;
		 position: absolute;
		 color: white;
		 bottom:150rpx;
	}
	.logoimg{
		position: absolute;
		top:155rpx;
		z-index:10;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;	
		border-radius: 100upx;
	}
	.text-area {
		position: absolute;
		top:530rpx;
		display: flex;
		justify-content: center;
	}
	.title { 
		font-size: 25rpx;
		color: #8f8f94;
	}
	.loader {
		z-index:1;
		position: absolute;
		top:130rpx;
		width: 250rpx;
		height: 250rpx;
		border-radius: 50%;
		background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
		animation: animate 1.2s linear infinite;
	}
	@keyframes animate {
			0% {
					transform: rotate(0deg);
			}
			100% {
					transform: rotate(360deg);
			}
	}
	.loader:after {
			content: '';
			position: absolute;
			top: 10px;
			left: 10px;
			right: 10px;
			bottom: 10px;
			background: #f1f1f1;
			border: solid white 10px;
			border-radius: 50%;
	}
</style>
